<template>
  <div class="dataStatistics" ref="dataStatisticsRef"></div>
</template>

<script>
import { commonRequest } from "../../api/api.js";
export default {
  name: "dataStatistics",
  data() {
    return {
      departmentValueId: "",
      departmentValueIdData: "",
      shen: "",
      shi: ""
    };
  },
  mounted() {},
  methods: {
    // 政策图谱数据请求
    dataRequest(
      provinceValue,
      cityValue,
      areaValue,
      departmentValue,
      datas,
      shen,
      shi
    ) {
      this.shen = shen;
      this.shi = shi;
      var type = 0;
      if (departmentValue != null) {
        this.departmentValueId = departmentValue;
      }
      if (departmentValue != null || areaValue != null) {
        type = 1;
      }
      commonRequest("/api/pms/pmsPolicyNotice/getPolicyAtlas", {
        province: provinceValue,
        city: cityValue,
        area: areaValue,
        departmentId: departmentValue,
        queryType: type
      }).then(res => {
        if (type == 0) {
          var dataName = [];
          var dataValue = [];
          if (provinceValue == null && cityValue == null) {
            for (let i = 0; i < datas.length; i++) {
              dataName.push(datas[i]);
              dataValue.push(0);
              for (let q = 0; q < res.length; q++) {
                if (res[q].province == dataName[i]) {
                  dataValue[i] = res[q].policyTotal;
                }
              }
            }
          }
          if (provinceValue != null) {
            for (let i = 0; i < datas.length; i++) {
              dataName.push(datas[i]);
              dataValue.push(0);
              for (let q = 0; q < res.length; q++) {
                if (res[q].city == dataName[i]) {
                  dataValue[i] = res[q].policyTotal;
                }
              }
            }
          }
          if (cityValue != null) {
            for (let i = 0; i < datas.length; i++) {
              dataName.push(datas[i]);
              dataValue.push(0);
              for (let q = 0; q < res.length; q++) {
                if (res[q].area == dataName[i]) {
                  dataValue[i] = res[q].policyTotal;
                }
              }
            }
          }
          this.StatisticalGeneration(dataName, dataValue);
        } else {
          if (departmentValue != null) {
            var dataName = [];
            var dataValue = [];
            for (let i = 0; i < res.length; i++) {
              dataName.push(res[i].departmentName);
              dataValue.push(res[i].policyTotal);
            }
            this.StatisticalGeneration(dataName, dataValue);
          } else {
            commonRequest("/api/pms/pmsDepartment/list", {
              pageSize: 10000,
              province: provinceValue,
              city: cityValue,
              area: areaValue
            }).then(mes => {
              this.departmentValueIdData = mes;
              var dataName = [];
              var dataValue = [];
              for (let i = 0; i < mes.records.length; i++) {
                dataName.push(mes.records[i].departmentName);
                dataValue.push(0);
                for (let q = 0; q < res.length; q++) {
                  if (res[q].departmentName == dataName[i]) {
                    dataValue[i] = res[q].policyTotal;
                  }
                }
              }
              this.StatisticalGeneration(dataName, dataValue);
            });
          }
        }
      });
    },
    // 图表生成
    StatisticalGeneration(dataName, dataValue) {
      for (let i = 0; i < dataValue.length; i++) {
        for (let j = 0; j < dataValue.length; j++) {
          if (dataValue[i] < dataValue[j]) {
            // 相邻元素两两对比
            var t = dataValue[i];
            dataValue[i] = dataValue[j];
            dataValue[j] = t;
            var t1 = dataName[i];
            dataName[i] = dataName[j];
            dataName[j] = t1;
          }
        }
      }
      var that = this;
      var MaxValue = Math.max(...dataValue);
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: "政策数量<br/>{b}: {c}"
        },
        grid: {
          left: "12%",
          right: "3%",
          bottom: "15%",
          top: "3%"
        },
        yAxis: [
          {
            type: "category",
            data: dataName,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0, //横轴信息全部显示
              rotate: 0, // 倾斜角度
              formatter: function(value) {
                return value.length > 10
                  ? value.substring(0, 10) + "..."
                  : value;
              }
            }
          }
        ],
        xAxis: [
          {
            type: "value",
            max: MaxValue
          }
        ],
        dataZoom: [
          {
            start: 100,
            end: 100,
            width: 14,
            type: "slider",
            show: true,
            yAxisIndex: [0], //设置 dataZoom-slider 组件控制的 y轴
            handleSize: 0, //滑动条的 左右2个滑动条的大小
            right: 0, //左边的距离
            top: 0,
            bottom: 26, //右边的距离
            minValueSpan: 5, //用于限制窗口大小的最小值（实际数值）。
            maxValueSpan: 5, //用于限制窗口大小的最大值（实际数值）。
            fillerColor: "#aaa", // 选中范围的填充颜色。
            borderColor: "#f9fbff",
            backgroundColor: "#f9fbff", //两边未选中的滑动条区域的颜色
            showDataShadow: false, //是否显示数据阴影 默认auto
            showDetail: false //即拖拽时候是否显示详细数值信息 默认true
          }
        ],
        series: [
          {
            type: "bar",
            barWidth: "44%",
            data: dataValue,
            itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = ["#44a2ff", "#2862ad"];
                  if (params.dataIndex % 2 == 0) {
                    return colorList[0];
                  } else {
                    return colorList[1];
                  }
                }
              }
            }
          }
        ]
      };
      var myChart1 = this.$echarts.init(that.$refs.dataStatisticsRef);
      myChart1.setOption(option);
      if (myChart1._$handlers.click) {
        myChart1._$handlers.click.length = 0;
      }
      myChart1.on("click", function(params) {
        if (that.departmentValueId != "" && that.departmentValueId != null) {
          that.$router.push({
            path: "/departmentInside",
            query: {
              id: that.departmentValueId
            }
          });
        } else if (that.departmentValueIdData != "") {
          for (let i = 0; i < that.departmentValueIdData.records.length; i++) {
            if (
              params.name ==
              that.departmentValueIdData.records[i].departmentName
            ) {
              that.$router.push({
                path: "/departmentInside",
                query: {
                  id: that.departmentValueIdData.records[i].id
                }
              });
            }
          }
        } else {
          if (that.shen == "" && that.shi == undefined) {
            that.$router.push({
              path: `/policyNotice/${params.name}`
              // query: {
              //   province: params.name,
              //   city: "",
              //   area: ""
              // }
            });
          } else if (that.shen == that.shi) {
            that.$router.push({
              path: `/policyNotice/${that.shen}/${params.name}`
              // query: {
              //   province: that.shen,
              //   city: params.name,
              //   area: ""
              // }
            });
          } else {
            that.$router.push({
              path: `/policyNotice/${that.shen}/${that.shi}/${params.name}`
              // query: {
              //   province: that.shen,
              //   city: that.shi,
              //   area: params.name
              // }
            });
          }
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.dataStatistics {
  width: 100%;
  height: 100%;
}
</style>
